import React, { useEffect, useRef } from 'react'
import "animate.css";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import PropTypes from 'prop-types'
const Transition = ({ animates, keyID, children }) => {
    return (
        <div>
            <TransitionGroup>
                <CSSTransition
                    key={keyID}
                    classNames={animates}
                >
                    {children}
                </CSSTransition>
            </TransitionGroup>
        </div>
    )
}

Transition.propTypes = {
    animates: PropTypes.object
}
Transition.defaultProps = {
    animates: {
        enter: "animate__animated",//进场前
        enterActive: "animate__backInUp", //进场后直到结束
        exit: "animate__animated",//结束前
        exitActive: "animate__backOutUp",//结束后
    }
}

export default Transition;


